<template>
    <div class="home_content">
        <div class="home_header_content">
            <div class="title-content">
                <h4>插件管理系统</h4>
            </div>
            <div style="width: 60%">
                <el-menu :default-active='this.$route.path'
                         mode="horizontal"
                         @select="handleSelect"
                         background-color="#F9F9F9"
                         router>
                    <el-menu-item index="/plugin">插件</el-menu-item>
                    <el-menu-item index="/my">我的</el-menu-item>
                </el-menu>
            </div>
            <div class="title-content">

            </div>
        </div>
        <div class="score_content">
            <router-view class="router-content"></router-view>
        </div>
    </div>
</template>

<script>
    export default {
        name: "home",
        data() {
            return {}
        },
        mounted() {
        },
        methods: {
            handleSelect() {

            }
        }
    }
</script>

<style scoped>
    .home_content {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        height: 100%;
    }


    .home_header_content {
        display: flex;
        flex-direction: row;
        justify-content: center;
        width: 100%;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
    }


    .title-content {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        flex-grow: 1;
    }

    .score_content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
        width: 60%;
        height: 100%;
        margin-bottom: 10px;
    }


</style>